<template>
  <div id="user-activities">
    <div class="main-container container-fluid container-limited page-holder">
      <UserActivitiesList :activities="activities" :is-loading="isLoading"/>
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import UserActivitiesList from './ActivitiesList';
import * as format from './format';

export default {
  name: 'UserActivities', // 用户近期动态
  components: { UserActivitiesList },
  data() {
    return {
      activities: [], // 动态数据
      isLoading: false, // 正在加载动态数据
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
    };
  },
  computed: {
    // 当前查看的用户id
    userId() { return this.$route.params.userId; },
    // 加载动态数据所需参数
    initLoadParams() {
      return {
        userId: this.userId,
        page: this.$route.query.page || 1, // 加载页数
      };
    },
  },
  methods: {
    // 加载动态数据
    loadActivities() {
      this.isLoading = true;
      this.$api.users.activities(this.initLoadParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    handleRes(res) {
      this.activities = format.formatActivities(res.data);
      this.pagination.currentPage = res.kaminari.current_page;
      this.pagination.pageCount = res.kaminari.total_pages;
    },
  },
  created() {
    this.loadActivities();
  },
  watch: {
    // 监听加载空间数据，发生改变时重新加载空间列表
    initLoadParams() { this.loadActivities(); },
  },
};
</script>

<style></style>
